<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        body,h1,h2,h3,h4,h5,h6,
        div,span,p,a,input,button,ul,ol,dl,dt,dd,li,textarea,table,th,tr,td,b{
            margin:0;
            padding:0;
            font-family: "Microsoft Yahei",sans-serif;
            box-sizing: border-box;
            cursor: default;
        }
        html,body{
            width:100%;
            height:100%;
            /*font-size:14px;*/
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        a,a:active,a:visited{
            text-decoration: none;
            color: #ccc;
            cursor: pointer;
        }
        a:hover{
            color:#333;
        }
        button{
            cursor: pointer;
        }
        textarea{
            outline:none;
            border:1px solid #ccc;
            resize: none;
        }
        table{
            border-collapse:collapse;
            border-spacing:0;
        }
        th,td{
            border:1px solid #ccc;
        }
        .clearfix::before,
        .clearfix::after{
            content:"";
            height: 0;
            line-height: 0;
            display: block;
            visibility: none;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .border-test{
            border:1px solid #ca82ff;
            box-sizing: border-box;
        }
        .w_100{
            width:100%;
        }
        .border{
            border:1px solid #ddd;
            box-sizing: border-box;
        }
        .border-top{
            border-top:1px solid #ddd;
        }
        .border-bottom{
            border-bottom: 1px solid #ddd;
        }
        .ml_5{
            margin-left:5px;
        }
        .fs_12{
            font-size: 12px;
        }
        .fs_14{
            font-size: 14px;
        }
        .fs_16{
            font-size: 16px;
        }
        .fs_18{
            font-size: 18px;
        }
        .c_333{
            color:#333;
        }
        .c_666{
            color:#666;
        }
        .c_999{
            color:#999;
        }
        .c_f0f0f0{
            color:#f0f0f0;
        }
        .c_ccc{
            color:#ccc;
        }
        .c_ddd{
            color:#ddd;
        }
        .bg_ddd{
            background-color:#ddd;
        }
        .c_red{
            color:#ff0d0f;
        }
        .c_yellow{
            color:#ffbc24;
        }
        .c_blue{
            color:#3babff
        }
        .c_green{
            color:#35c253;
        }
        .c_purple{
            color:#ca82ff;
        }
        .bg_red{
            background-color:#ff0d0f;
        }
        .bg_yellow{
            background-color:#ffbc24;
        }
        .bg_blue{
            background-color:#3babff;
        }
        .bg_green{
            background-color:#35c253;
        }
        .bg_purple{
            background-color:#ca82ff;
        }
        .mr_5{
            margin-right:5px;
        }
        .mt_5{
            margin-top:5px;
        }
        .mb_5{
            margin-bottom:5px;
        }
        .ml_10{
            margin-left:10px;
        }
        .mr_10{
            margin-right:10px;
        }
        .mt_10{
            margin-top:10px;
        }
        .mb_10{
            margin-bottom:10px;
        }
        .ml_15{
            margin-left:15px;
        }
        .mr_15{
            margin-right:15px;
        }
        .mt_15{
            margin-top:15px;
        }
        .mb_15{
            margin-bottom:15px;
        }
        .ml_20{
            margin-left:20px;
        }
        .mr_20{
            margin-right:20px;
        }
        .mt_20{
            margin-top:20px;
        }
        .mb_20{
            margin-bottom:20px;
        }
        .mlr_5{
            margin-left:5px;
            margin-right:5px;
        }
        .mtb_5{
            margin-top:5px;
            margin-bottom:5px;
        }
        .mlrtb_5{
            margin:5px;
        }
        .mlr_10{
            margin-left:10px;
            margin-right:10px;
        }
        .mtb_10{
            margin-top:10px;
            margin-bottom:10px;
        }
        .mlrtb_10{
            margin:10px;
        }
        .mlr_15{
            margin-left:15px;
            margin-right:15px;
        }
        .mtb_15{
            margin-top:15px;
            margin-bottom:15px;
        }
        .mlrtb_15{
            margin:15px;
        }
        .mlr_20{
            margin-left:20px;
            margin-right:20px;
        }
        .mtb_20{
            margin-top:20px;
            margin-bottom:20px;
        }
        .mlrtb_20{
            margin:20px;
        }
        .pl_5{
            padding-left:5px;
        }
        .pr_5{
            padding-right:5px;
        }
        .pt_5{
            padding-top:5px;
        }
        .pb_5{
            padding-bottom:5px;
        }
        .pl_10{
            padding-left:10px;
        }
        .pr_10{
            padding-right:10px;
        }
        .pt_10{
            padding-top:10px;
        }
        .pb_10{
            padding-bottom:10px;
        }
        .pl_15{
            padding-left:15px;
        }
        .pr_15{
            padding-right:15px;
        }
        .pt_15{
            padding-top:15px;
        }
        .pb_15{
            padding-bottom:15px;
        }
        .pl_20{
            padding-left:20px;
        }
        .pr_20{
            padding-right:20px;
        }
        .pt_20{
            padding-top:20px;
        }
        .pb_20{
            padding-bottom:20px;
        }
        .plr_5{
            padding-left:5px;
            padding-right:5px;
        }
        .ptb_5{
            padding-top:5px;
            padding-bottom:5px;
        }
        .plrtb_5{
            padding:5px;
        }
        .plr_10{
            padding-left:10px;
            padding-right:10px;
        }
        .ptb_10{
            padding-top:10px;
            padding-bottom:10px;
        }
        .plrtb_10{
            padding:10px;
        }
        .plr_15{
            padding-left:15px;
            padding-right:15px;
        }
        .ptb_15{
            padding-top:15px;
            padding-bottom:15px;
        }
        .plrtb_15{
            padding:15px;
        }
        .plr_20{
            padding-left:20px;
            padding-right:20px;
        }
        .ptb_20{
            padding-top:20px;
            padding-bottom:20px;
        }
        .plrtb_20{
            padding:20px;
        }
        /*******************************自定义flex快速布局class*******************************/

        [class*="flex-box"]{
            display:-webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
        [class*="flex-ibox"]{
            display: inline-flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            vertical-align: bottom;
        }
        [class*="flex-box"].flex-nowrap,[class*="flex-ibox"].flex-nowrap{
            flex-wrap: nowrap;
        }
        [class*="flex-box"].flex-wrap,[class*="flex-ibox"].flex-wrap{
            flex-wrap: wrap;
        }

        .flex-box-rcc{
            flex-direction: row;
            justify-content: center;
            align-items:center;
            align-content: center;
        }
        .flex-box-ccc {
            flex-direction: column;
            justify-content: center;
            align-items:baseline;
            align-content: center;
        }

        /*******************************自定义flex快速布局class./*******************************/



    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript">
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return 'phone';
            }else
            {
                return 'pc';
            }
        }
        setRem();
        window.addEventListener("orientationchange", setRem);
        window.addEventListener("resize", setRem);
        window.addEventListener("resize", setRem);
        function setRem() {
            var html = document.querySelector("html");
            var width = html.getBoundingClientRect().width;

            if(browserRedirect()=="pc"){
                // if(width>1336){width=750; html.style.maxWidth = 750 + 'px';}
            }
            html.style.fontSize =100*width /750 + "px";
            // html.style.fontSize = width /16 + "px";
        }
    </script>
    <style>

        body{
            font-size:0.26rem;
        }
        .mfs_20{
            font-size: 0.2rem;
        }
        .mfs_26{
            font-size: 0.26rem;
        }
        .mfs_32{
            font-size:0.32rem;
        }
        .mfs_36{
            font-size:0.36rem;
        }
        #demo1-container{
            width:auto;
            height:100%;
            margin:0 auto;

        }


        .box-1{

           align-items: baseline;
        }
        .flex-box__item{
            width:0.5rem;
            height:0.5rem;
            font-size:0.26rem;
            color:#f00;
            border:1px solid #f0f;
            box-sizing: border-box;
        }

        .test-flex-box{
            width:3rem;
            border:1px solid #f0f;
            box-sizing: border-box;
            height:50%;
        }
    </style>
</head>
<body>


<div id="demo1-container" >
    <div class="flex-ibox-rcc test-flex-box box-1" >
        <div class="flex-box__item">1</div>
        <div class="flex-box__item" style="font-size:0.32rem">2</div>
        <div class="flex-box__item" style="font-size:0.4rem">3</div>
    </div>
    <div class="flex-ibox-rcc test-flex-box" >
        <div class="flex-box__item">1</div>
        <div class="flex-box__item" style="font-size:0.32rem">2</div>
        <div class="flex-box__item" style="font-size:0.4rem">3</div>
    </div>
    <br><br><br>
        <div class="flex-ibox-ccc test-flex-box" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item" style="font-size:0.32rem">2</div>
            <div class="flex-box__item" style="font-size:0.4rem">3</div>
        </div>
    <!--demo1-container./-->
</div>


<style>
    .box{

    }
</style>


<div class="flex--row-tl"></div>
<div class="flex--inline-row-tl"></div>

<div class="flex--column-tl"></div>
<div class="flex--column-tl flex--vertical-top"></div>
<div class="flex--inline-column-tl flex--reverse flex--nowrap"></div>

<!--

flex--row-tl
flex--row-tc
flex--row-tr

flex--row-cl
flex-row-cc
flex--row-cr

flex--row-bl
flex--row-bc
flex--row-br

flex--row-tsb
flex--row-csb
flex--row-bsb

flex--row-tsa
flex--row-csa
flex--row-bsa

flex--inline-row-tl
flex--inline-row-tc
flex--inline-row-tr

flex--inline-row-cl
flex--inline-row-cc
flex--inline-row-cr

flex--inline-row-bl
flex--inline-row-bc
flex--inline-row-br

flex--inline-row-tsb
flex--inline-row-csb
flex--inline-row-bsb

flex--row-tsa
flex--row-csa
flex--row-bsa

flex--column-tl
flex--column-tc
flex--column-tr

flex--column-cl
flex-column-cc
flex--column-cr

flex--column-bl
flex--column-bc
flex--column-br

flex--column-tsb
flex--column-csb
flex--column-bsb

flex--column-tsa
flex--column-csa
flex--column-bsa

flex--inline-column-tl
flex--inline-column-tc
flex--inline-column-tr

flex--inline-column-cl
flex--inline-column-cc
flex--inline-column-cr

flex--inline-column-bl
flex--inline-column-bc
flex--inline-column-br



flex--vertical-top
flex--reverse
flex--nowrap


-->







</body>
</html>